import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter, Route, Link } from "react-router-dom";

import ShouControl from "./views/ShouControl";
import Lifecycle from "./views/Lifecycle";
import MyVModel from "./views/MyVModel";
import CRUD from "./views/CRUD";

function App() {
  return (
    <BrowserRouter>
      <div className="box">
        <ul className="menu-box">
          <li>
            <Link to="/ShouControl">受控和非受控组件</Link>
          </li>
          <li>
            <Link to="/MyVModel">双向绑定</Link>
          </li>
          <li>
            <Link to="/CRUD">医生信息的维护（CRUD）</Link>
          </li>
          <li>
            <Link to="/Lifecycle">生命周期</Link>
          </li>
          <li></li>
        </ul>
        <div className="main-box">
          <Route path="/ShouControl" component={ShouControl} />
          <Route path="/MyVModel" component={MyVModel} />
          <Route path="/Lifecycle" component={Lifecycle} />
          <Route path="/CRUD" component={CRUD} />
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;
